<template>
    <div class="user-wrapper">
        <div class="content-box">
            <a-icon class="action" type="search"/>
            <a href="https://pro.loacg.com/docs/getting-started" target="_blank">
                <a-icon class="action" type="question-circle-o"/>
            </a>

            <notice-icon class="action"/>

            <a-dropdown>
                <div class="action ant-dropdown-link user-dropdown-menu">
                    <a-avatar class="avatar" size="small" :src="avatar"/>
                    <span>{{ nickname }}</span>
                </div>
                <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
                    <a-menu-item key="0">
                        <router-link :to="{ name: 'center' }">
                            <a-icon type="user"/>
                            <span>个人中心</span>
                        </router-link>
                    </a-menu-item>
                    <a-menu-item key="1">
                        <router-link :to="{ name: 'settings' }">
                            <a-icon type="setting"/>
                            <span>账户设置</span>
                        </router-link>
                    </a-menu-item>
                    <a-menu-item key="2" disabled>
                        <a-icon type="setting"/>
                        <span>测试</span>
                    </a-menu-item>
                    <a-menu-divider/>
                    <a-menu-item key="3">
                        <a href="javascript:;" @click="handleLogout">
                            <a-icon type="logout"/>
                            <span>安全退出</span>
                        </a>
                    </a-menu-item>
                </a-menu>
            </a-dropdown>
        </div>
    </div>
</template>

<script>
    import NoticeIcon from '@/core/layouts/NoticeIcon'
    import Vue from 'vue'

    export default {
        components: {
            NoticeIcon
        },
        name: 'UserMenu',
        data() {
            return {nickname: 'OIOI', avatar: 'https://apic.douyucdn.cn/upload/avatar/default/09_big.jpg'}
        },
        methods: {
            handleLogout() {
                this.$confirm({
                    title: '提示',
                    content: '真的要注销登录吗 ?',
                    onOk: () => {
                        Vue.ls.set('token', '')
                        Vue.ls.set('roles', [])
                        Vue.ls.remove('token')
                        setTimeout(() => {
                            window.location.reload()
                        }, 16)
                    },
                    onCancel() {
                    }
                })
            }
        }
    }
</script>
